<div class="row">
	<div class="col-xs-12">
		<div class="box">
			<!-- /.box-header -->
			<div class="box-body">
				<div style="padding-bottom: 5px;padding-top:15px">
				    <button id="back"  class="btn btn-primary" data-dismiss="modal" style="float:right;">返回</button>	
					<button id="install"  class="btn btn-primary" data-dismiss="modal">开始安装</button>	
				</div>
				<div id="errorInformation" style="color:#D81E12;">
					<h3>参数检测失败 ，请检查以下错误!!!</h3>
					<ul style="list-style-type:none;margin-left:-20px;text-size:24px" id="errorLi">
					</ul>
				
				</div>
				
				<table id="example1" class="table table-bordered table-hover"
					style="font-size: 12px;">
					<thead>
						<tr>
							<th>系统参数</th>
							<th>当前值</th>
							<th>含义</th>
						</tr>
					</thead>
				</table>
				
			</div>
			<!-- /.box-body -->
		</div>
		<!-- /.box -->
	</div>
	<!-- /.col -->
</div>

<div class="row" id="Detection">
	<div class="col-xs-12">
		<div class="box">
			<!-- /.box-header -->
			<div class="box-body">
				<table id="example2" class="table table-bordered table-hover"
					style="font-size: 12px;">
					<thead>
						<tr>
							<th>节点IP</th>
							<th>节点角色</th>
							<th>状态</th>
						</tr>
					</thead>  
				</table>
			</div>
			<!-- /.box-body -->
		</div>
		<!-- /.box -->
	</div>
	<!-- /.col -->
</div>


<div class="modal fade" id="myModal4" tabindex="-1" role="dialog"
	aria-labelledby="myModalLabel">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
				<h4 class="modal-title" id="myModalLabel">设置参数</h4>
			</div>
			<div class="modal-body">
				<!-- Horizontal Form -->
		          <div class="box box-info" style="margin-bottom:0px;">
		            <!-- form start -->
		            <form class="form-horizontal">
		              <div class="box-body">
		                <div class="form-group">
		                  <label for="cpu-limits" class="col-sm-2 control-label">参数：</label>
		                  <div class="col-sm-10">
		                    <input type="text" class="form-control"  id="parameterValue" value="">
		                  </div>
		                </div>
		              </div>
		            </form>
		          </div>
		          <!-- /.box -->
			</div>
			<div class="modal-footer">
				<button  type="button" class="btn btn-default" data-dismiss="modal">关<span style="padding-left: 12px" />闭
				</button>
				<button type="button" class="btn btn-primary" data-dismiss="modal" id="setSaveBtn">保<span style="padding-left: 12px" />存
				</button>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript">
	// To make Pace works on Ajax calls
	$.ajax({
	    url:"/deploycluster/getnodemodal/modal",
	    type: "GET",
	    dataType:"json",
	    success: function(data){
	    	$("#back").click(function(){
	    		if(data.id==0){
	    			$(".content").load("singleNode.html");
	    		}else{
	    			$(".content").load("multiNode.html");
	    		}
	    	});
	    }
	});
	
	$("#errorInformation").hide();
	//获取页面数据上
	nodeNext();
	function nodeNext(){
		
		$.ajax({
		    url:"/deploycluster/global-params",
		    type: "GET",
		    dataType:"json",
		    success: function(data){
		    	
		    	var li="";
		    	$.each(data,function(i,item){
		    		li+="<tr><td>"+item.name+"</td><td>"+item.value+"<button style='float:right;' data-toggle='modal' data-target='#myModal4' class='set' c='"+item.value+"'  cn='"+item.name+"'>修改</button></td><td>"+item.describe+"</td></tr>";
		    	});
		    	$("#example1").html("<tr><th>系统参数</th><th>当前值</th><th>含义</th></tr>"+li);
		    	//修改参数
		    	var _param="",_value="";
		    	$( '#example1' ).find( 'tr .set' ).click(function() {
		    		//参数
		    		//$("#parameterName").html($( this ).attr('cn'));
		    		//值
		    		_param=$( this ).attr('cn');
		    		_value=$( this ).attr('c');
		    		$("#parameterValue").val(_value);
		    	});
		    	$("#setSaveBtn").click(function(){
		    		$.ajax({
		    		    url:"/deploycluster/update-global-params?param="+_param+"&value="+$("#parameterValue").val(),
		    		    type: "GET",
		    		    dataType:"text",
		    		    success: function(data){
		    		    	
		    		    	if(data=="SUCCESS:"){
		    		    		nodeNext();
		    		    	}
		    		    }
		    		});
		    	});
		    	
		    }
		});
	}

	$.ajax({
	    url:"/deploycluster/nodeslist",
	    type: "GET",
	    dataType:"json",
	    success: function(data){
	    	$.each(data,function(i,item){
	    		var nodeRole="";
	    		$.each(item.nodeRoleParams,function(m,n){
	    			nodeRole+=m+";";
	    		});
	    		$("#example2").append("<tr><td>"+item.ip+"</td><td>"+nodeRole+"</td><td class='detected'>待检测</td></tr>");
	    	});
	    	
	    }
	});
	
	$("#install").click(function(){
		$.ajax({
		    url:"/deploycluster/create-ansible-scripts",
		    type: "GET",
		    dataType:"json",
		    success: function(data){
		    	if(data.length>1){
		    		$("#errorInformation").show();
		    		var li="";
		    		$.each(data,function(i,item){
		    			li+="<li>"+item+"</li>"
		    		});
		    		$("#errorLi").html(li);
		    	}else{
		    		
		    		//$(".detected").html("检测成功");
		    		$.ajax({
		    		    url:"/deploycluster/start-install",
		    		    type: "GET",
		    		    dataType:"text",
		    		    success: function(data){
		    		    	if(data=="SUCCESS:"){
		    		    		$(".content").load("k8s-ansible-install.html");
		    		    	}
		    		    }
		    		});
		    	}
		    }
		});
	});

</script>
